<script setup lang="ts">
import {ref} from 'vue'

import { ElCarousel, ElCarouselItem } from 'element-plus'
// 图片文件名
let imgPathList = ['1N6A0020.JPG', '1N6A0021.JPG', '1N6A0022.JPG', '1N6A0023.JPG', '1N6A0024.JPG', '1N6A0025.JPG', '1N6A0026.JPG', '1N6A0027.JPG', '1N6A0031.JPG', '1N6A0032.JPG', '1N6A0033.JPG', '1N6A0034.JPG', '1N6A0040.JPG', '1N6A0041.JPG', '1N6A0042.JPG', '1N6A0043.JPG', '1N6A0044.JPG', '1N6A0045.JPG', '1N6A0046.JPG', '1N6A0047.JPG', '1N6A0048.JPG', '1N6A0049.JPG', '1N6A0050.JPG', '1N6A0051.JPG']
let imgList = ref([] as string[])
const download = (idx:number)=>{
  window.open(new URL("/images/raw/"+imgPathList[idx], import.meta.url))
}

</script>

<template>
  <div class="block">
    <h3 style="text-align: center;">致20181152</h3>
    <el-carousel trigger="click" height="1000px">
      <el-carousel-item v-for="(item, idx) in imgPathList" :key="idx">
        <img :src="`/images/${item}`" alt="" @click="download(idx)">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style>
html, body, #app{
  width: 100%;
  height: 100%;
  margin: 0px;
}
img {
  width: 100%;
}
</style>
